<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 参考文档 - Fx/Fx.Scroll</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Fx-Scroll">Fx.Scroll</a></h4>
      <div class="menu-item"><a href="#Fx-Scroll:constructor">constructor</a></div>
      <div class="menu-item"><a href="#Fx-Scroll:set">set</a></div>
      <div class="menu-item"><a href="#Fx-Scroll:start">start</a></div>
      <div class="menu-item"><a href="#Fx-Scroll:toTop">toTop</a></div>
      <div class="menu-item"><a href="#Fx-Scroll:toBottom">toBottom</a></div>
      <div class="menu-item"><a href="#Fx-Scroll:toLeft">toLeft</a></div>
      <div class="menu-item"><a href="#Fx-Scroll:toRight">toRight</a></div>
      <div class="menu-item"><a href="#Fx-Scroll:toElement">toElement</a></div>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="Fx-Scroll"><a href="#Fx-Scroll">Class: Fx.Scroll</a></h1>
      <p class="description">Scrolls any element with an overflow, including the window element.</p>
      <h3>Note</h3>
      <ul>
        <li>Fx.Scroll requires the page to be in <a href="http://hsivonen.iki.fi/doctype/">Standards Mode</a>.</li>
      </ul>
      <h3>Extends</h3>
      <ul>
        <li><a href="../../../docs/core/Fx/Fx.html">Fx</a></li>
      </ul>
      <h2 id="Fx-Scroll:constructor"><a href="#Fx-Scroll:constructor">Fx.Scroll Method: constructor</a></h2>
      <h3 class="description">Syntax</h3>
      <pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="kw3">Scroll</span><span class="br0">(</span>element<span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>element - (<em>mixed</em>) A string of the id for an Element or an Element reference to scroll.</li>
        <li>options - (<em>object</em>, 可选) All <a href="../../../docs/core/Fx/Fx.html">Fx</a> Options in addition to offset, overflown, and wheelStops.</li>
      </ol>
      <p>Options:</p>
      <ol>
        <li>offset     - (<em>object</em>: defaults to {'x': 0, 'y': 0}) An object with x and y properties of the distance to scroll to within the Element.</li>
        <li>overflown  - (<em>array</em>: defaults to []) An array of nested scrolling containers, see <a href="../../../docs/core/Element/Element.Dimensions.html#Element:getPosition">Element:getPosition</a> for an explanation.</li>
        <li>wheelStops - (<em>boolean</em>: defaults to true) If false, the mouse wheel will not stop the transition from happening.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) A new Fx.Scroll instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="kw3">Scroll</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="br0">{</span>

    offset: <span class="br0">{</span>
        <span class="st0">'x'</span>: <span class="nu0">0</span>,
        <span class="st0">'y'</span>: <span class="nu0">100</span>
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>.<span class="me1">toTop</span><span class="br0">(</span><span class="br0">)</span>;

</pre>
      <h3>Notes</h3>
      <ul>
        <li>Fx.Scroll transition will stop on mousewheel movement if the wheelStops option is not set to false. This is to allow  users to control their web experience.</li>
        <li>Fx.Scroll is useless for Elements without scrollbars.</li>
      </ul>
      <h2 id="Fx-Scroll:set"><a href="#Fx-Scroll:set">Fx.Scroll Method: set</a></h2>
      <p class="description">Scrolls the specified Element to the x/y coordinates immediately.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myFx.<span class="me1">set</span><span class="br0">(</span>x, y<span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>x - (<em>integer</em>) The x coordinate to scroll the Element to.</li>
        <li>y - (<em>integer</em>) The y coordinate to scroll the Element to.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Fx.Scroll instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myElement = $<span class="br0">(</span>document.<span class="me1">body</span><span class="br0">)</span>;
<span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="kw3">Scroll</span><span class="br0">(</span>myElement<span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="nu0">0</span>, <span class="nu0">0.5</span> * document.<span class="me1">body</span>.<span class="me1">offsetHeight</span><span class="br0">)</span>;

</pre>
      <h2 id="Fx-Scroll:start"><a href="#Fx-Scroll:start">Fx.Scroll Method: start</a></h2>
      <p class="description">Scrolls the specified Element to the x/y coordinates provided.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myFx.<span class="me1">start</span><span class="br0">(</span>x, y<span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>x - (<em>integer</em>) The x coordinate to scroll the Element to.</li>
        <li>y - (<em>integer</em>) The y coordinate to scroll the Element to.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Fx.Scroll instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myElement = $<span class="br0">(</span>document.<span class="me1">body</span><span class="br0">)</span>;

<span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="kw3">Scroll</span><span class="br0">(</span>myElement<span class="br0">)</span>.<span class="me1">start</span><span class="br0">(</span><span class="nu0">0</span>, <span class="nu0">0.5</span> * document.<span class="me1">body</span>.<span class="me1">offsetHeight</span><span class="br0">)</span>;

</pre>
      <h3>Notes</h3>
      <ul>
        <li>Scrolling to negative coordinates is impossible.</li>
      </ul>
      <h2 id="Fx-Scroll:toTop"><a href="#Fx-Scroll:toTop">Fx.Scroll Method: toTop</a></h2>
      <p class="description">Scrolls the specified Element to its maximum top.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myFx.<span class="me1">toTop</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Fx.Scroll instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="co1">//Scrolls "myElement" 200 pixels down from its top and, after 1.5 seconds,</span>
<span class="co1">//back to the top.</span>
<span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="kw3">Scroll</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="br0">{</span>

    onComplete: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">toTop</span>.<span class="me1">delay</span><span class="br0">(</span><span class="nu0">1500</span>, <span class="kw1">this</span><span class="br0">)</span>;
    <span class="br0">}</span>

<span class="br0">}</span><span class="br0">)</span>.<span class="me1">scrollTo</span><span class="br0">(</span><span class="nu0">0</span>, <span class="nu0">200</span><span class="br0">)</span>.<span class="me1">chain</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

    <span class="kw1">this</span>.<span class="me1">scrollTo</span><span class="br0">(</span><span class="nu0">200</span>, <span class="nu0">0</span><span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h2 id="Fx-Scroll:toBottom"><a href="#Fx-Scroll:toBottom">Fx.Scroll Method: toBottom</a></h2>
      <p class="description">Scrolls the specified Element to its maximum bottom.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myFx.<span class="me1">toBottom</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Fx.Scroll instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="co1">//Scrolls the window to the bottom and, after one second, to the top.</span>
<span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="kw3">Scroll</span><span class="br0">(</span>window<span class="br0">)</span>.<span class="me1">toBottom</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">chain</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

    <span class="kw1">this</span>.<span class="me1">toTop</span>.<span class="me1">delay</span><span class="br0">(</span><span class="nu0">1000</span>, <span class="kw1">this</span><span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h2 id="Fx-Scroll:toLeft"><a href="#Fx-Scroll:toLeft">Fx.Scroll Method: toLeft</a></h2>
      <p class="description">Scrolls the specified Element to its maximum left.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myFx.<span class="me1">toLeft</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Fx.Scroll instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="co1">//Scrolls "myElement" 200 pixels to the right and then back.</span>
<span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="kw3">Scroll</span><span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">scrollTo</span><span class="br0">(</span><span class="nu0">200</span>, <span class="nu0">0</span><span class="br0">)</span>.<span class="me1">chain</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

    <span class="kw1">this</span>.<span class="me1">toLeft</span><span class="br0">(</span><span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h2 id="Fx-Scroll:toRight"><a href="#Fx-Scroll:toRight">Fx.Scroll Method: toRight</a></h2>
      <p class="description">Scrolls the specified Element to its maximum right.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myFx.<span class="me1">toRight</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Fx.Scroll instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="co1">//Scrolls "myElement" to the right edge and then to the bottom.</span>
<span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="kw3">Scroll</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="br0">{</span>

    duration: <span class="nu0">5000</span>,
    wait: <span class="kw2">false</span>
<span class="br0">}</span><span class="br0">)</span>.<span class="me1">toRight</span><span class="br0">(</span><span class="br0">)</span>;
&nbsp;
myFx.<span class="me1">toBottom</span>.<span class="me1">delay</span><span class="br0">(</span><span class="nu0">2000</span>, myFx<span class="br0">)</span>;

</pre>
      <h2 id="Fx-Scroll:toElement"><a href="#Fx-Scroll:toElement">Fx.Scroll Method: toElement</a></h2>
      <p class="description">Scrolls the specified Element to the position the passed in Element is found.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myFx.<span class="me1">toElement</span><span class="br0">(</span>el<span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>el - (<em>mixed</em>) A string of the Element's id or an Element reference to scroll to.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Fx.Scroll instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="co1">//Scrolls the "myElement" to the top left corner of the window.</span>
<span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="kw3">Scroll</span><span class="br0">(</span>window<span class="br0">)</span>.<span class="me1">toElement</span><span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>;

</pre>
      <h3>Notes</h3>
      <ul>
        <li>See <a href="../../../docs/core/Element/Element.Dimensions.html#Element:getPosition">Element:getPosition</a> for position difficulties.</li>
      </ul>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
